<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>天地图加载</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <link rel="stylesheet"  href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.18/"></script>
    <script src="./data/jquery-3.6.0.min.js"></script>

    <script>
        require(["esri/Map", "esri/views/SceneView","esri/layers/WebTileLayer", "esri/Graphic","esri/layers/GraphicsLayer",],
            function(Map, SceneView,WebTileLayer,Graphic,GraphicsLayer) {

            let tiledLayer = new WebTileLayer({
                urlTemplate:'https://{subDomain}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILECOL={col}&TILEROW={row}&tk=886d6ea429c3326f87bde14b36482e12',
                subDomains: ["t0", "t1", "t2", "t3","t4", "t5", "t6", "t7"],
            });

            let tiledLayer_poi = new WebTileLayer({
                urlTemplate:'https://{subDomain}.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILECOL={col}&TILEROW={row}&tk=886d6ea429c3326f87bde14b36482e12',
                subDomains: ["t0", "t1", "t2", "t3","t4", "t5", "t6", "t7"],
            });

            const graphicsLayer = new GraphicsLayer();

            let map = new Map({
                basemap: {
                    baseLayers: [tiledLayer, tiledLayer_poi]
                },
                labels:[graphicsLayer]
            });

            let view = new SceneView({
                container: "viewDiv",
                map: map,
                zoom: 10
            });


            view.when(()=>{
                $.get("./data/1.json",(data)=>{
                    view.goTo(data);

                    //(面)创建多边形图形,将几何图形和符号添加到新图形
                    let polygonGraphic = new Graphic({
                        geometry: {
                            type: "polygon", // autocasts as new Polygon()
                            rings: [
                                [-64.78, 32.3],
                                [-66.07, 18.45],
                                [-80.21, 25.78],
                                [-64.78, 32.3]
                            ]
                        },
                        symbol: {
                            type: "simple-fill", // autocasts as new SimpleFillSymbol()
                            color: [227, 139, 79, 0.1],
                            outline: {
                                // autocasts as new SimpleLineSymbol()
                                color: [255, 255, 255],
                                width: 1
                            }
                        }
                    });

                    graphicsLayer.removeAll();
                    //graphicsLayer.add(polygonGraphic);

                    //将图形添加到视图的图形层
                    view.graphics.addMany([polygonGraphic]);
                })

            })

        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
</body>
</html>
